<!DOCTYPE html>
<html>

<head>
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="../bootstrap-5.1.3-dist/css/bootstrap.css" rel="stylesheet">
  <script src="../bootstrap-5.1.3-dist/js/bootstrap.bundle.min.js"></script>
</head>

<body class="container">
  <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling"
    aria-controls="offcanvasScrolling">body 元素可以滚动无背景</button>
  <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop"
    aria-controls="offcanvasWithBackdrop">body 元素不能滚动有背景</button>
  <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions"
    aria-controls="offcanvasWithBothOptions">body 元素可以滚动有背景</button>

  <div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1"
    id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
    <div class="offcanvas-header">
      <h5 class="offcanvas-title" id="offcanvasScrollingLabel">正文内容可以滚动</h5>
      <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
      <p>滚动页面查看效果。</p>
    </div>
  </div>
  <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasWithBackdrop"
    aria-labelledby="offcanvasWithBackdropLabel">
    <div class="offcanvas-header">
      <h5 class="offcanvas-title" id="offcanvasWithBackdropLabel">使用背景画布</h5>
      <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
      <p>正文内容不可滚动</p>
    </div>
  </div>
  <div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions"
    aria-labelledby="offcanvasWithBothOptionsLabel">
    <div class="offcanvas-header">
      <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">使用背景画布，正文内容可滚动</h5>
      <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
      <p>滚动页面查看效果。</p>
    </div>
  </div>
  <div class="container-fluid mt-3">
    <h3>侧边栏滚动测试</h3>
    <p>侧边栏滚动测试内容。。。。</p>
    <p>侧边栏滚动测试内容。。。。</p>
    <p>侧边栏滚动测试内容。。。。</p>
    <p>侧边栏滚动测试内容。。。。</p>
    <br /><br /><br /><br /><br />
    <p>侧边栏滚动测试内容。。。。</p>
    <p>侧边栏滚动测试内容。。。。</p>
    <p>侧边栏滚动测试内容。。。。</p>
    <p>侧边栏滚动测试内容。。。。</p>
    <br /><br /><br /><br /><br />
    <p>侧边栏滚动测试内容。。。。</p>
    <p>侧边栏滚动测试内容。。。。</p>
    <p>侧边栏滚动测试内容。。。。</p>
    <p>侧边栏滚动测试内容。。。。</p>
    <br /><br /><br /><br /><br />
    <p>侧边栏滚动测试内容。。。。</p>
    <p>侧边栏滚动测试内容。。。。</p>
    <p>侧边栏滚动测试内容。。。。</p>
    <p>侧边栏滚动测试内容。。。。</p>
    <br /><br /><br /><br /><br />
  </div>
</body>

</html>